import { globalStyle, style } from '@vanilla-extract/css';
import { brighten, fallBackGlobalStyle } from '../../theme/tools';
import { vars } from '../../theme/vars.css';

const contentHeight = `calc(${vars.layout.inputHeight} - 0.4em)`;

export const tagStyle = style({
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'flex-start',
	flexWrap: 'wrap',
	borderRadius: vars.layout.smallRadius,
	transition: 'border-color .2s',
	padding: '0.2em 0.4em',
	overflow: 'hidden',
	lineHeight: vars.layout.inputHeight,
	minHeight: vars.layout.inputHeight,
	color: vars.color.text,
	backgroundColor: vars.color.panelBackground,
	border: `1px solid ${vars.color.border}`,
	outline: 'none',
	boxSizing: 'border-box',
	width: '20em',
	selectors: {
		'&:hover': {
			borderColor: vars.color.secondaryText,
		},
		'&.focus,&:focus-within': {
			border: `1px solid ${vars.color.accent}`,
			boxShadow: `0 0 2px ${vars.color.accent}`,
		},
		'&.invalid': {
			borderColor: vars.color.danger,
		},
		'&.disabled': {
			cursor: 'not-allowed',
			color: vars.color.disabledText,
			borderColor: vars.color.disabledText,
		},
	},
});

globalStyle(`${tagStyle}>div`, {
	display: 'inline-flex',
	flexDirection: 'row',
	alignItems: 'center',
	justifyContent: 'center',
	minWidth: '2rem',
	color: vars.color.text,
	fontSize: '1rem',
	height: `calc(${vars.layout.inputHeight} - 0.8em)`,
	lineHeight: `calc(${vars.layout.inputHeight} - 0.8em)`,
	padding: '0 0.4em',
	margin: '0.2em',
	outline: 'none',
	border: 'none',
	background: vars.color.selectionBlur,
	boxSizing: 'border-box',
	maxWidth: 'calc(100% - 3em)',
});

globalStyle(`${tagStyle}>div:focus`, {
	backgroundColor: vars.color.selection,
});

globalStyle(`${tagStyle}>div>span`, {
	overflow: 'hidden',
	textOverflow: 'ellipsis',
	marginLeft: '0.2em',
	whiteSpace: 'nowrap',
});
globalStyle(`${tagStyle}>div>svg`, {
	height: '1.2em',
	width: '1.2em',
	padding: '0 0 0 0.2em',
	fill: vars.color.emphasizeText,
});

globalStyle(`${tagStyle} input`, {
	flex: 1,
	minWidth: '2em',
	color: vars.color.text,
	fontSize: '1rem',
	height: contentHeight,
	lineHeight: contentHeight,
	padding: '0 0.2em',
	margin: 0,
	outline: 'none',
	border: 'none',
	background: 'none',
	boxSizing: 'border-box',
});

globalStyle(`${tagStyle}.select-only`, {
	cursor: 'pointer',
});

globalStyle(`${tagStyle}.select-only>input`, {
	cursor: 'pointer',
});

globalStyle(`${tagStyle}.read-only>div>svg,${tagStyle}.disabled>div>svg`, {
	display: 'none',
});
globalStyle(`${tagStyle}.disabled>div`, {
	backgroundColor: brighten(vars.color.selectionBlur, 0.05),
	userSelect: 'none',
});

fallBackGlobalStyle(
	`${tagStyle}.disabled>div`,
	{
		backgroundColor: vars.color.selectionBlur,
	},
	{
		backgroundColor: vars.color.selectionBlur,
	},
);

globalStyle(`${tagStyle} input::-webkit-input-placeholder`, {
	color: vars.color.placeholderText,
});

globalStyle(`${tagStyle} input:disabled`, {
	color: vars.color.disabledText,
	cursor: 'not-allowed',
});

globalStyle(`${tagStyle} svg`, {
	flexShrink: '0',
	height: '2.2em',
	width: '2.2em',
	padding: '0 0.4em',
	fill: vars.color.placeholderText,
	cursor: 'default',
});

globalStyle(`${tagStyle}>div>svg`, {
	opacity: 0.3,
});

globalStyle(`${tagStyle}>div:hover>svg`, {
	opacity: 1,
});

globalStyle(`${tagStyle}.disabled svg`, {
	fill: vars.color.disabledText,
});

globalStyle(`${tagStyle}>span`, {
	display: 'none',
});

globalStyle(`${tagStyle}.select-only>span`, {
	display: 'inline-flex',
	height: `calc(${vars.layout.inputHeight} - 1em)`,
	width: `calc(${vars.layout.inputHeight} - 1em)`,
	backgroundColor: vars.color.secondaryText,
	justifyContent: 'center',
	alignItems: 'center',
	borderRadius: '1em',
	cursor: 'pointer',
	marginLeft: '0.5em',
});

globalStyle(`${tagStyle}.disabled>div>span`, {
	color: vars.color.disabledText,
});

globalStyle(`${tagStyle}.read-only,${tagStyle}.read-only>input,${tagStyle}.read-only>svg`, {
	cursor: 'default',
});

globalStyle(`${tagStyle}.disabled,${tagStyle}.disabled>input,${tagStyle}.disabled>svg`, {
	cursor: 'not-allowed',
});
